<template>
  <div class="main bg">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="account">
        <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;margin-top: 20px;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import NProgress from 'nprogress'
export default {
  data () {
    return {
      vuegConfig: {
        forwardAnim: 'fadeIn', // options所有配置可以写在这个对象里，会覆盖全局的配置
        disable: false // 对于嵌套路由，默认为关闭动画，需要在组件的data.vuegConfig中配置disable为false启用
      },
      // fullHeight: document.documentElement.clientHeight,
      logining: false,
      ruleForm2: {
        account: 'admin',
        checkPass: ''
      },
      rules2: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      checked: true
    };
  },
  // beforeCreate () {
  //   console.log('wwwwwwww', this.$route.params);
  // },
  // mounted () {
  //   window.addEventListener('resize', () => {
  //     this.fullHeight = document.documentElement.clientHeight;
  //   });
  // },
  methods: {
    enter (event) {
      console.log('event', event);
    },
    handleReset2 () {
      this.$refs.ruleForm2.resetFields();
    },
    handleSubmit2 (ev) {
      // var _this = this;
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          this.logining = true;
          var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
          if (loginParams.password !== '123456') {
            this.$message({
              message: '密码输入有误！',
              type: 'error'
            });
            this.logining = false;
            return;
          }
          sessionStorage.setItem('user', JSON.stringify(loginParams));
          if (this.$route.params && this.$route.params.path) {
            this.$router.push({ path: this.$route.params.path }); // 登录跳转页面
          } else {
            this.$router.push({ path: '/' }); // 登录跳转页面
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.main {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  .login-container {
    position: absolute;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    width: 300px;
    padding: 35px 35px 15px 35px;
    background-color: rgba(250,250,250,.85);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #000;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
}
</style>
